<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <input type="hidden" id="json-data" value='{$row.content}'>
    <input type="hidden" id="date" value='{$row.date}'>

    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th style="padding: 5px; text-align: center;">用户ID</th>
            <th style="padding: 5px; text-align: center;">昵称</th>
            <th style="padding: 5px; text-align: center;">奖金</th>
        </tr>
        </thead>
        <tbody id="data-container">
        </tbody>
    </table>

    <div class="pagination-wrapper text-center">
<!--        <span class="btn btn-success" id="export-btn"><a class="btn-success page-link" href="javascript:;">导出Excel</a></span>-->
        <ul class="pagination">
            <li class="page-item btn-success" id="export-btn"><a class="btn-success page-link" href="javascript:;">导出Excel</a></li>
            <li class="page-item prev"><a class="page-link" href="javascript:;">上一页</a></li>
            <li class="page-item next"><a class="page-link" href="javascript:;">下一页</a></li>
        </ul>
        <div class="page-status">
            第 <span id="current-page">1</span> 页 / 共 <span id="total-pages">1</span> 页
        </div>
    </div>
</form>

<!-- 引入 SheetJS 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const itemsPerPage = 10; // 每页显示数量
        const jsonData = JSON.parse(document.getElementById('json-data').value);
        let currentPage = 1;

        // 初始化分页
        function initPagination() {
            const totalPages = Math.ceil(jsonData.length / itemsPerPage) ?? 1;
            document.getElementById('total-pages').textContent = totalPages;

            if (jsonData.length < 1) {
                // document.querySelector().classList.toggle('disabled');
                document.querySelector('#export-btn').style.display = 'none';
            }
        }

        // 渲染表格数据
        function renderTable() {
            const start = (currentPage - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            const pageData = jsonData.slice(start, end);

            const tbody = document.getElementById('data-container');
            tbody.innerHTML = pageData.map(item => `
            <tr>
                <td style="text-align: center;">${item.user_id}</td>
                <td style="text-align: center;">${item.nickname}</td>
                <td style="text-align: center;">${item.bonusPerUser}</td>
            </tr>
        `).join('');

            document.getElementById('current-page').textContent = currentPage;
            document.querySelector('.prev').classList.toggle('disabled', currentPage === 1);
            document.querySelector('.next').classList.toggle('disabled',
                currentPage === Math.ceil(jsonData.length / itemsPerPage));

        }

        document.querySelector('.prev').addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                renderTable();
            }
        });

        document.querySelector('.next').addEventListener('click', () => {
            if (currentPage < Math.ceil(jsonData.length / itemsPerPage)) {
                currentPage++;
                renderTable();
            }
        });

        document.getElementById('export-btn').addEventListener('click', function() {

            const date = $('#date').val();
            const file_name = '金牌会员分红数据';

            // 格式化数据，增加“分红日期”这一列
            const formattedData = jsonData.map(item => ({
                "分红日期": date,
                "用户ID": item.user_id,
                "昵称": item.nickname,
                "分红": item.bonusPerUser
            }));

            // 生成工作表与工作簿
            const ws = XLSX.utils.json_to_sheet(formattedData);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "用户数据");

            // 拼接文件名，例如“金牌会员分红数据_2025-03-12.xlsx”
            const fullFileName = `${file_name}_${date}.xlsx`;
            XLSX.writeFile(wb, fullFileName);
        });

        initPagination();
        renderTable();
    });
</script>